<template>
 <div v-if="filmlist.length!=0" style="height: 100%; width: 100%">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"  style="height: 100%; width: 100%" >
      <van-card v-for="(item,index) in list" :key="item+index" :thumb="item.poster" tag="hot"  @click="pushRouter(item.filmId)">
        <template #title>
          <van-row class="nowPlay-title-name">
            <span>{{item.name}}</span>
            <van-tag
              size="medium"
              plain
              type="danger"
              class="nowPlay-title-name-van-tag"
            >{{item.filmType.name}}</van-tag>
          </van-row>
        </template>

        <template #desc>
          <van-row class="nowPlay-title-grade">
            <span>观众评分</span>
            <span>{{item.grade}}</span>
          </van-row>
        </template>

        <template #price-top>
          <van-row class="nowPlay-title-price-top">
            <span span="4">主演: </span>
            <span
              v-for="(items,indexs) in item.actors" :key="items.avatarAddress+indexs">{{items.name}}</span>
          </van-row>
          <van-row class="nowPlay-title-nation own-style2">
            <span >{{item.nation}}</span>
            <span>| {{item.runtime}}分钟</span>
          </van-row>
        </template>

        <template #footer>
          <van-button size="small" class="nowPlay-title-button">查看</van-button>
        </template>
        <!-- 有bug 不能删除template这个num标签 删除就会导致盒子坍塌 -->
        <template #num> </template>
      </van-card>
    </van-list>
  </div>
</template>
<script>
import comingMovie from "../../request-get/coming-movie.js";
export default {
  name:"comingSoon",
  data() {
    return {
      active: 0,
      // 接受的数组
      list: [],
      filmlist:[],
      // 判断是否需要加载
      loading: false,
      // 是否完成
      finished: false,
      flag:0,
      setTime:0
    };
  },
  created(){
    this.list.splice(0,this.list.length)
    comingMovie.then((res)=>{
      console.log(res,"woyaokezzzz");
      this.filmlist=JSON.parse(JSON.stringify(res))
    })

  },

  methods: {
    onLoad() {    
      this.setTime=  setTimeout(() => {
        let core = this.list.length;
        for (let i = 0; i <  100; i++) {
            if( (core+i) >= this.filmlist.length ){
                  this.finished = true;
                  break;
             }
          this.list.push(this.filmlist[i]);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= this.filmlist.length) {
          this.finished = true;
         }else{
             this.finished = false;
         }
        }, 100);

    },
    setfilmId(e) {
      // console.log(e);
      this.$store.commit("setfilmId", e);
    },
    pushRouter(e) {
      // 点击取到filmid
      // console.log(e);
      this.setfilmId(e);
      this.$router.push({
        path: "film",
        query:{
          filmId:e,
           showBuy:false
        }
      });
    },

  },
  beforeDestroy(){
    clearTimeout(this.setTime)
  }





};
</script>
<style >
/* 片名 */
div.nowPlay-title-name {
  text-align: left;
  font-size: 16px;
  width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
div.nowPlay-title-name .nowPlay-title-name-van-tag {
  margin-left: 10px;
  background-color: rgb(210, 214, 220);
  color: white;
  border-radius: 5px
}
/* 成绩 */
div.nowPlay-title-grade {
  text-align: left;
  font-size: 16px;
}
div.nowPlay-title-grade span:nth-child(1) {
  font-size: 14px;
}
div.nowPlay-title-grade span:nth-child(2) {
  margin-left: 10px;
  color: rgb(255, 196, 97);
}
/* 主演 */
div.nowPlay-title-price-top {
  width: 140px;
  height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*主演内部的div*/
div.nowPlay-title-price-top div {
  height: 100px;
  text-align: left
}
/* 来自中国大陆 */
div.nowPlay-title-nation  {
  transform: translateX(-7px);
  
}
.own-style2{
transform: translateX(0px);
margin-left: 7px;
}
/* div.nowPlay-title-nation  span:nth-child(2){
  
} */

/* 绝对定位的按钮 */
.nowPlay-title-button {
  position: absolute;
  bottom: 35px;
  right: 10px;
  color: rgb(255, 174, 138);
  border: rgb(255, 174, 138) 1px solid;
}

/* 这个调一下页面的间距 */
div.van-card__bottom {
  margin-bottom: 5px;
}
</style>